<header>
    <h1
        class="logo"
        routerLink="/"
        matTooltip="{{ 'header.homeTip' | translate }}"
    >
        Sayobot's Home
    </h1>

    <div class="menus">
        <div class="menus-sm">
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
        </div>

        <!-- 大屏 - 导航菜单 -->
        <div class="menus-bg">
            <button
                mat-button
                [matMenuTriggerFor]="langMenu"
                matTooltip="{{ 'menu.lang.tip' | translate }}"
            >
                <mat-icon><img src="{{ langIcon }}" /> </mat-icon>
            </button>

            <button mat-button routerLink="/support">
                {{ 'menu.support' | translate }}
            </button>
            <button mat-button routerLink="/about">
                {{ 'menu.about' | translate }}
            </button>
            <a mat-button href="https://osu.sayobot.cn/download/">
                {{ 'menu.downloadCenter' | translate }}
            </a>
            <button mat-button [matMenuTriggerFor]="otherMenu">
                {{ 'menu.more' | translate }}
            </button>
        </div>
    </div>
</header>

<!-- 小屏 - 导航菜单 -->
<mat-menu #menu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="langMenu">
        {{ 'menu.lang.title' | translate }}
    </button>
    <button mat-menu-item routerLink="/support">
        {{ 'menu.support' | translate }}
    </button>
    <button mat-menu-item routerLink="/about">
        {{ 'menu.about' | translate }}
    </button>
    <a mat-menu-item href="https://osu.sayobot.cn/download/">
        {{ 'menu.downloadCenter' | translate }}
    </a>
    <button mat-menu-item [matMenuTriggerFor]="otherMenu">
        {{ 'menu.more' | translate }}
    </button>
</mat-menu>

<!-- 其他菜单 -->
<mat-menu #otherMenu="matMenu">
    <button mat-menu-item (click)="openHelpDialog()">
        <mat-icon>help</mat-icon>
        <span>{{ 'menu.help' | translate }}</span>
    </button>
    <button mat-menu-item routerLink="/history">
        <mat-icon>update</mat-icon>
        <span>{{ 'menu.log' | translate }}</span>
    </button>
    <button mat-menu-item routerLink="/setting">
        <mat-icon>settings</mat-icon>
        <span>{{ 'menu.setting' | translate }}</span>
    </button>
</mat-menu>

<!-- 选择语言菜单 -->
<mat-menu #langMenu="matMenu">
    <button
        mat-menu-item
        *ngFor="let item of language"
        (click)="useLanguage(item.key)"
    >
        <mat-icon><img [src]="item.flag" alt="item.key" /></mat-icon>
        {{ item.title }}
    </button>
</mat-menu>
